<template>
  <div class="home">
    <!-- app 头部 -->
    <AppBar class="app-bar" color="primary" title="首页">
      <Button icon slot="left"  @click="$store.state.userDrawer.open=true">
        <Icon value="menu"></Icon>
      </Button>
    </AppBar>
    <!-- 列表 -->
    <List textline="two-line">
      <div v-for="(item, index) in boxList" :key="index">
        <ListItem @click="showBoxDetail(item, index)" button :ripple="false">
          <ListAction>
            <ListItemContent>
              <ListItemTitle>{{item.title}}</ListItemTitle>
              <ListItemSubTitle>{{item.date}}</ListItemSubTitle>
            </ListItemContent>
          </ListAction>
        </ListItem>
        <Divider></Divider>
      </div>
    </List>
    <!-- 箱子详情 -->
    <box-detail :open="boxDetailOpen" @close="boxDetailClose"></box-detail>
    <!-- 用户抽屉 -->
    <UserDrawer></UserDrawer>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Divider from "@/components/Divider";
import { List, ListAction, ListItem, ListItemContent, ListItemTitle, ListItemSubTitle } from "@/components/List";
import AppBar from "@/components/AppBar";
import Button from "@/components/Button";
import Icon from "@/components/Icon";
import BoxDetail from "@/views/common/box-detail.vue";
import UserDrawer from "@/views/common/user-drawer.vue";

@Component({
  components: {
    List,
    ListItem,
    ListAction,
    ListItemContent,
    ListItemTitle,
    ListItemSubTitle,
    Divider,
    AppBar,
    Button,
    Icon,
    BoxDetail,
    UserDrawer
  }
})

export default class Home extends Vue {

  boxList = [
    { title: "标题", date: "Jan 9, 2014" },
    { title: "标题", date: "Jan 9, 2014" },
    { title: "标题", date: "Jan 9, 2014" },
    { title: "标题", date: "Jan 9, 2014" },
    { title: "标题", date: "Jan 9, 2014" },
    { title: "标题", date: "Jan 9, 2014" },
    { title: "标题", date: "Jan 9, 2014" },
    { title: "标题", date: "Jan 9, 2014" },
    { title: "标题", date: "Jan 9, 2014" },
    { title: "标题", date: "Jan 9, 2014" }
  ];

  boxDetailOpen = false;

  showBoxDetail (item, index) {
    this.boxDetailOpen = true;
  }

  boxDetailClose () {
    this.boxDetailOpen = false;
  }

}
</script>

<style lang="less">
  .home{

  }
</style>
